<template>
   <ul :class="`tw-libbtntab`">
     <li class="tw-libbtntab-item"
      :class="{xactive: active === item.value}"
      v-for="(item,idx) in resultList"
      :key="idx"
      @click="handleClick(item)">
        <img class="xicon"
          :style="{width: iconWidth, height: iconHeight, objectFit: objectFit}"
          v-if="getIcons('default', idx)"
          :src="`${$twApp.fileBaseUrl}${getIcons('default', idx).localPath}`" />
        <img class="xhovericon"
          :style="{width: iconWidth, height: iconHeight, objectFit: objectFit}"
          v-if="getIcons('hover', idx)"
          :src="`${$twApp.fileBaseUrl}${getIcons('hover', idx).localPath}`" />
        <a>{{item.name}}</a>
     </li>
   </ul>
</template>

<script>
import props from './props'

export default {
  name: 'tabs',

  props,

  data() {
    return {
      active: this.list[0]
    }
  },

  computed: {
    resultList () {
      return this.list.map((item, idx) => {
        if (typeof item === 'string' || typeof item === 'number') {
          return {
            value: item,
            name: item
          }
        } else if (!item.value) {
          item.value = item.name
        }

        // if (idx === 1) {
        //   if (this.defaultFirst) {
        //     this.active = item.value
        //     this.$emit('input', this.active)
        //     this.$emit('change', this.active)
        //   }
        // }

        return item
      })
    },

    style () {
      return {
        fontSize: this.fontSize,
        height: this.height,
        paddingX: this.paddingX,
        color: this.color,
        activeColor: this.activeColor,
        activeBg: this.activeBg,
        borderColor: this.borderColor,
        activeBorderColor: this.activeBorderColor,
        borderRadius: this.borderRadius,
        lineHeight: this.lineHeight
      }
    }
  },

  methods: {
    getIcons (type, idx) {
      if (type === 'default') {
        return this.icons[idx]
      } else {
        return this.hoverIcons[idx] || this.icons[idx]
      }
    },

    setStyle () {
      const radiusSize = `${parseInt(this.height) / 2} + ${(this.height + '').replace(/\d+/, '')}`

      let style = `
        ::root.tw-libbtntab {
          height: ${this.height} !important;
          font-size: ${this.fontSize};
          color: ${this.color};
        }

        ::root .tw-libbtntab-item {
          line-height: ${this.lineHeight ? this.lineHeight : this.height};
          padding: 0 ${this.paddingX};
          border-color: ${this.borderColor};
        }

        ::root .tw-libbtntab-item:first-child {
          border-top-left-radius: ${radiusSize};
          border-bottom-left-radius:  ${radiusSize};
        }

        ::root .tw-libbtntab-item:last-child {
          border-top-right-radius: ${radiusSize};
          border-bottom-right-radius: ${radiusSize};
        }

        .tw-libbtntab-item.xactive {
          color: ${this.activeColor};
          background: ${this.activeBg};
          border-color: ${this.activeBorderColor};
        }

        ::root .tw-libbtntab-item:first-child {
          border-top-left-radius: ${this.borderRadius};
          border-bottom-left-radius: ${this.borderRadius};
        }

        ::root .tw-libbtntab-item:last-child {
          border-top-right-radius: ${this.borderRadius};
          border-bottom-right-radius: ${this.borderRadius};
        }
      `

      if (this.getIcons('default', 0)) {
        style += `
          ::root .tw-libbtntab-item a {
            vertical-align: middle;
          }
        `
      }

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    handleClick(item, isFirst) {
      let value = ''
      if (isFirst) { // fix bug yhz 2021412
        if (typeof item === 'string' || typeof item === 'number') {
          value = item
        } else if ((item instanceof Object) && 'value' in item) {
          value = item.value
        } else if ((item instanceof Object) && 'name' in item) {
          value = item.name
        }
      } else {
        value = item.value
      }

      if (this.active !== value || isFirst) {
        this.active = value
        this.$emit('input', this.active)
        this.$emit('change', this.active)
      }
    }
  },

  mounted () {
    this.setStyle()
    this.handleClick(this.resultList[0], true)
  },

  watch: {
    list: {
      deep: true,
      handler () {
        this.handleClick(this.resultList[0], true)
      }
    },
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
